﻿<html>
<head>
    <script type="text/javascript" src="../dhtiny.js"></script>
    <style type="text/css">
        .MOVE   {top:  10px; width:100px;height:100px;position:absolute;background:red;border:solid 1px yellow;}
        .RESIZE {top: 120px; width:100px;height:100px;position:absolute;background:blue;overflow:hidden;}
    </style>
</head>
<body>
<div id="Div1" class="MOVE" style="left:100px;"> Drag to move this (without mask)</div>
<div id="Div2" class="MOVE" style="left:220px;"> Drag to move this (without ghost effect) </div>
<div id="Div3" class="MOVE" style="left:340px;"> Drag to move this (with ghost effect) </div>

<div id="Div4" class="RESIZE" style="left:100px;">  Drag this to resize this (with mask)</div>
<div id="Div5" class="RESIZE" style="left:220px;">  Drag this to resize this (without mask)</div>

<div id="Div6" class="RESIZE" style="top:250px;left:100px;background: purple;">  Drag to move/resize this (width min/max size/top/left)</div>

<script type="text/javascript">
$dh.Require(["util/dragmanager"]);

$dh.addLoader(function() {
    $dh.disableSelect(document.body);
    DHDRAG.setDrag(document.getElementById("Div1"), { mode: "MOVE", noMask: true});
    DHDRAG.setDrag(document.getElementById("Div2"), { mode: "MOVE", ghostDrag: false });
    DHDRAG.setDrag(document.getElementById("Div3"), { mode: "MOVE", ghostDrag: true});
    
    DHDRAG.setDrag(document.getElementById("Div4"), { mode: "RESIZE", ghostDrag: true, dResize:10});
    DHDRAG.setDrag(document.getElementById("Div5"), { mode: "RESIZE", ghostDrag: false, dResize:10});
    DHDRAG.setDrag(document.getElementById("Div6"), { mode: "RESIZE,MOVE", dResize:6, maxwidth:200, maxheight: 200, maxtop: 300, maxleft:300, mintop:100, minleft:100});
});
</script>    
 </body>
</html>
